<template>
	<view :class="formItem.config.class">
		<template v-if="formItem.config.model == 'appModel3'">
			<view class="banner-content">
				<image class="banner-image" :src="vuex_h5Config['backgroundImg']" mode="widthFix"></image>
				<view class="banner-info">
					<view class="info-title"
						:style="{
							'font-family': setAttr('title', 'fontFamily'),
							'font-size': pxToRpx(setAttr('title', 'fontSize')),
							'color': setAttr('title', 'color'),
						}">{{setAttr('title', 'text')}}</view>
					<view class="info-time"
						:style="{
							'font-family': setAttr('time', 'fontFamily'),
							'font-size': pxToRpx(setAttr('time', 'fontSize')),
							'color': setAttr('time', 'color'),
						}">
						活动时间：
						{{vuex_activity.startingTime ? `${vuex_activity.startingTime} ~ ` : '' }} {{vuex_activity['endTime']}}
						</view>
				</view>
			</view>
		</template>
		<template v-if="formItem.config['model'] == 'appModel5'">
			<view class="banner-content">
				<image class="banner-image" :src="vuex_h5Config['backgroundImg']" mode="widthFix"></image>
				<view class="banner-info">
					<view class="info-title"
						:style="{
							'font-family': setAttr('title', 'fontFamily'),
							'font-size': pxToRpx(setAttr('title', 'fontSize')),
							'color': setAttr('title', 'color'),
						}">{{setAttr('title', 'text')}}</view>
					<view class="info-time"
						:style="{
							'font-family': setAttr('time', 'fontFamily'),
							'font-size': pxToRpx(setAttr('time', 'fontSize')),
							'color': setAttr('time', 'color'),
						}">
						活动时间：
						{{vuex_activity.startingTime ? `${vuex_activity.startingTime} ~ ` : '' }} {{vuex_activity['endTime']}}
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import { getActiveInfo } from '@/api/hd/index.js'
	import {pxToRpx} from './tools.js'
	import { mapGetters } from 'vuex'
	export default {
		props: {
			formItem:{
				type: Object,
				default: {}
			}
		},
		computed: {
		  ...mapGetters(['vuex_activity', 'vuex_h5Config']),
		},
		data(){
			return {
				routeParams: {},
				activeInfo: {},
			}
		},
		methods: {
			pxToRpx: pxToRpx,
			setAttr(configKey, valKey){
				let _self = this
				if(configKey == 'formItem'){
					return _self.formItem['configH5'][valKey]
				}else{
					if(!_self.formItem[configKey]) return
					if(configKey == 'title' && valKey == 'text'){
						return _self.formItem[configKey]['configH5'][valKey] || _self.vuex_activity['activityName']
					}else{
						return _self.formItem[configKey]['configH5'][valKey]
					}
				}				
			}
		}
	}
</script>

<style lang="scss" scoped>
	// px 转为 rpx 的函数
	@function rem($px) {
	  @return $px * 1rpx;
	}
	.app-model-3.banner-model{
		position: relative;
		margin: 0;
		padding-bottom: 0;
		.banner-image{
			display: block;
			width: 100%;
			height: auto;
		}
		.banner-content{
			position: relative;
			.banner-info{
				position: absolute;
				left: 0;
				right: 0;
				top: 45%;
				text-align: center;
				.info-title{
					font-weight: bold;
				}
				.info-time{
					margin-top: rem(40);
				}
			}
		}
	}
	.app-model-5.banner-model{
		position: relative;
		margin: 0;
		.banner-image{
			display: block;
			width: 100%;
			height: auto;
		}
		.banner-content{
			position: relative;
			.banner-info{
				position: absolute;
				left: 0;
				right: 0;
				top: rem(200);
				text-align: center;
				.info-title{
					font-weight: bold;
				}
				.info-time{
					margin-top: rem(30);
				}
			}
		}
	}
</style>